<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>新增表单控件属性</title>
    <style>
      input[type="text"]::placeholder {
        color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 
        required必须填写字段 
        autofocus自动获取焦点
        autocomplete自动获取输出历史记录
        pattern正则表达式
    -->
    <form action="#">
      账号:
      <input
        type="text"
        name="account"
        placeholder="请输入账号"
        required
        autofocus
        autocomplete="on"
        pattern="[a-zA-Z0-9]{6,12}"
      />
      <br />

      密码: <input type="password" name="pwd" placeholder="请输入密码" />
      <br />

      性别:
      <input type="radio" value="male" name="gender" />男
      <input type="radio" value="female" name="gender" />女
      <br />

      爱好:
      <input type="checkbox" value="smoke" name="hobby" required />抽烟
      <input type="checkbox" value="drink" name="hobby" />喝酒
      <input type="checkbox" value="perm" name="hobby" />烫头发
      <br />

      其他:
      <textarea name="other" id="" cols="30" rows="10" required></textarea>
      <br />
      <button>提交</button>
    </form>
  </body>
</html>
